<template>
  <BeforeNavBar></BeforeNavBar>
  <div class="main-content">
    <div class="top-section">
      <AppSidebar class="sidebar" />
      <div class="carousel-section">
      </div>
    </div>
    <div class="content-section">
      <!-- <section class="course-section">
        <h2>精品课程 <a href="#">更多>></a></h2>
        <div class="course-list">
          <div class="course-item" v-for="course in courses" :key="course.id" @click="goToCourse(course.id)">
            <div class="course-placeholder">
              <img :src="course.resource_url" alt="课程图片" class="course-image">
            </div>
            <div
              :class="[
                'course-status',
                { ongoing: course.status === '正在进行' },
              ]"
            >
              {{ course.status }}
            </div>
            <div class="course-semester_name">{{ course.semester_name }}</div>
            <div class="shijian">
              <div class="course-tea">{{ course.tea }}</div>
              <div class="course-date">{{ course.date }}</div>
             
            </div>
           
          </div>
        </div>
      </section> -->
      <!-- <section class="intro-section">
        <h2>课程简介 <router-link to="/course-intro">更多>></router-link></h2>
        <div class="intro-container">
          <div class="intro-small-list intro-item"  v-for="intro in filteredIntros" :key="intro.id" @click="goTointros(intros.id)" >
            <div class="intro-placeholder">
              <img :src="intro.resource_url" alt="课程图片"  class="course-image">
            </div>
            <div class="intro-content">
                <div class="intro-title">{{ intro.semester_name }}</div>
                <div class="intro-text">{{ intro.course_intro }}</div>
              </div>
          </div>
          <div class="list1">
            <div class="list2">
            <div class="intro-smalll-list1 intro-item1" v-for="intro in filteredIntros1" :key="intro.id" @click="goTointros(intros.id)">
              <div class="intro-placeholder1"> 
                <img :src="intro.resource_url" alt="课程图片"  class="course-image">
              </div>
              <div class="intro-content">
                <div class="intro-title">{{ intro.semester_name }}</div>
                <div class="intro-text">{{ intro.course_intro }}</div>
              </div>
            </div>
          </div>
          <div class="list3">
            <div class="intro-smalll-list1 intro-item1" v-for="intro in filteredIntros2" :key="intro.id" @click="goTointros(intros.id)">
              <div class="intro-placeholder1"> 
                <img :src="intro.resource_url" alt="课程图片"  class="course-image">
              </div>
              <div class="intro-content">
                <div class="intro-title">{{ intro.semester_name }}</div>
                <div class="intro-text">{{ intro.course_intro }}</div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </section> -->
      <!-- <section class="knowledge-section">
        <h2>知识图谱 <a href="#">更多>></a></h2>
       
        <div class="sidebar">
          <ul class="liebiao">
            <div class="wen">
              <li class="lii"><a href="#" @click.prevent="showContent('content1')" class="wenzi">知识图谱1</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content2')" class="wenzi">知识图谱2</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content3')" class="wenzi">知识图谱3</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content4')" class="wenzi">知识图谱4</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content5')" class="wenzi">知识图谱5</a></li>
            <li class="lii"><a href="#" @click.prevent="showContent('content6')" class="wenzi">知识图谱6</a></li>
            </div>
          </ul>
          <div v-if="currentContent === 'content1'" class="neirong">
            内容1的视图
          </div>
          <div v-if="currentContent === 'content2'" class="neirong">
            内容2的视图
          </div>
          <div v-if="currentContent === 'content3'" class="neirong">
            内容3的视图
          </div>
          <div v-if="currentContent === 'content4'" class="neirong">
            内容4的视图
          </div>
          <div v-if="currentContent === 'content5'" class="neirong">
            内容5的视图
          </div>
          <div v-if="currentContent === 'content6'" class="neirong">
            内容6的视图
          </div>
        </div>
      </section> -->
      <section class="team-section">
        <h2>教学团队 <a href="#">更多>></a></h2>
        <div class="team-list">
          <div class="team-item" v-for="team in teams" :key="team.id">
            <div class="team-placeholder"><img :src="team.img_url" alt=""></div>
            <div class="team-name">
              <!-- {{ team.name }} -->桂林电子科技大学
            </div>
          </div>
        </div>
      </section>
      <section class="comments-section">
        <h2>精彩评论 <a href="#">更多>></a></h2>
        <div class="comments-list">
          <div class="comment-item" v-for="comment in comments" :key="comment.id">
            <div class="toux"><img :src="comment.img_url" alt="头像图片"></div>
            <div class="yonghu">
              <div class="shijian">
                <div class="comment-user">{{ comment.username }}</div>
                <div class="comment-date">{{ comment.formattedCreateTime }}</div>
              </div>
              <div class="comment-content">{{ comment.content }}</div>
            </div>

          </div>
        </div>
      </section>

    </div>
  </div>
</template>

<script>
import api from '../api';
import AppSidebar from "@/components/AppSidebar.vue";
// import axios from '../api/axios'; // 导入配置好的 Axios 实例
import BeforeNavBar from '@/components/BeforeNavBar.vue'
export default {
  name: "HomePage",
  components: {
    AppSidebar,
    BeforeNavBar
  },

  data() {
    return {
      idCounter: 0,  // 初始化团队ID计数器
      courses: [
        {
          id: 1,
          status: "正在进行",
          semester_name: "计算机基础",
          tea: "刘老师",
          date: "07月03日 19:00",

        },
        {
          id: 9,
          status: "正在进行",
          semester_name: "大学计算机基础",
          tea: "刘老师",
          date: "07月03日 19:00",


        },
        {
          id: 3,
          status: "正在进行",
          semester_name: "大学计算机基础",
          tea: "刘老师",
          date: "07月03日 19:00",

        },
        {
          id: 4,
          status: "未开始",
          semester_name: "大学计算机基础",
          tea: "刘老师",
          date: "07月03日 19:00",

        },
        {
          id: 5,
          status: "未开始",
          semester_name: "大学计算机基础",
          tea: "刘老师",
          date: "07月03日 19:00",

        },
        // 更多课程
      ],
      resourceUrl: '', // 存储从接口返回的资源URL
      courseIntro: '', // 存储课程简介标题
      filteredIntros: [], // 第一组课程简介数据
      filteredIntros1: [], // 第二组课程简介数据
      filteredIntros2: [], // 第三组课程简介数据
      currentContent: 'content1',// 初始内容为 content1
      intros: [
        {
          id: 1,
          semester_name: "大学生心理健康",
          course_intro: "简介......简介......简介......简介......",
        },

      ],
      knowledgeItems: [
        { id: 1, title: "知识图谱" },
        { id: 2, title: "知识图谱" },
        { id: 3, title: "知识图谱" },
        { id: 4, title: "知识图谱" },
        { id: 5, title: "知识图谱" },
        { id: 6, title: "知识图谱" },
        { id: 7, title: "知识图谱" },
        { id: 8, title: "知识图谱" },
        // 更多知识图谱
      ],
      comments: [
        {
          id: 1,
          user: "某用户",
          content: "这是一个十分好用的网站！",
          date: "2024.07.02 16:45",
          upvote: "100",
        },
        {
          id: 2,
          user: "某用户",
          content: "这是一个十分好用的网站！",
          date: "2024.07.02 16:45",
          upvote: "100",
        },
        {
          id: 3,
          user: "某用户",
          content: "这是一个十分好用的网站！",
          date: "2024.07.02 16:45",
          upvote: "100",
        },
        {
          id: 4,
          user: "某用户",
          content: "这是一个十分好用的网站！",
          date: "2024.07.02 16:45",
          upvote: "100",
        },
        // 更多评论
      ],
      teams: [
        { id: 1, name: "桂林电子科技大学" },
        { id: 2, name: "桂林电子科技大学" },
        { id: 3, name: "桂林电子科技大学" },
        { id: 4, name: "桂林电子科技大学" },
        // 更多团队
      ],
    };
  },

  mounted() {
    this.fetchComments();  // 组件挂载后立即获取评论数据
    this.fetchTeams(); // 在组件加载时获取团队信息
  },
  // this.fetchIntroData(); // 组件加载时获取数据
  // 精品课程
  // axios.post('/semester/showjingpin', {
  //   course_id: ["1"]

  // })

  // .then(response => {
  //   // 请求成功处理
  //   if (response.data.status === 1) {
  //     // 清空当前的 courses 数组
  //     this.courses = [];

  //     // 处理返回的课程数据
  //     response.data.data.forEach(courseData => {
  //       // 将接口返回的数据转换为需要的格式
  //       const course = {
  //         id: courseData.course_id, // 暂时使用数组长度作为 ID，实际应根据接口数据确定唯一 ID
  //         //id: courseData.semesterIds,
  //         status: "正在进行", // 默认状态
  //         semester_name: courseData.semester_name,
  //         tea: courseData.username,
  //         date: this.formatDate(courseData.start_time),
  //         resource_url: courseData.resource_url // 添加课程图片资源链接
  //       };

  //       // 将课程对象添加到 courses 数组中
  //       this.courses.push(course);
  //     });

  //     // 可以在这里对 courses 数组进行排序等操作
  //   } else {
  //     // 请求失败处理
  //     console.error('请求失败:', response.data.msg);
  //   }
  // })
  // .catch(error => {

  //   // 请求错误处理
  //   console.error('请求错误:', error);
  // });
  // 发起 get请求获取教学团队
  //   axios.get('http://192.168.137.1:8080/teacher/showteam', {//ga
  //     params: {
  //   course_id: "4"
  // }

  //   })
  //     .then(response => {
  //       // 请求成功处理
  //       if (response.data.status === 1) {
  //         this.teams = [];

  //         response.data.data.forEach(teamData => {
  //           const team = {
  //             id: idCounter,
  //             name: teamData.university,
  //             img_url: teamData.img_url
  //           };
  //           this.teams.push(team);
  //           idCounter++; // 计数器自增
  //           if (idCounter > 4) {
  //             idCounter = 1; // 超过4后重新从1开始
  //           }
  //           console.log('成功获取的团队信息:', this.teams);
  //         });
  //       } else {
  //         // 请求失败处理
  //         console.error('请求失败:', response.data.msg);
  //       }
  //     })
  //     .catch(error => {

  //       // 请求错误处理
  //       console.error('请求错误:', error);
  //     });
  // },
  // created() {
  //   this.fetchComments();

  // },
  methods: {

    fetchTeams() {
      api.getTechTeam(1)
  .then(response => {
    if (response.data.status === 1) {
      this.teams = [];  // 清空团队数组
      response.data.data.forEach(teamData => {
        if (this.idCounter <= 4) {
          const team = {
            id: this.idCounter,
            name: teamData.university,
            img_url: teamData.img_url
          };
          this.teams.push(team);  // 将 team 添加到 teams 数组中
          this.idCounter++; // 计数器自增
        }
      });
      console.log('成功获取的团队信息:', this.teams);
    } else {
      console.error('请求失败:', response.data.msg);
    }
  })
  .catch(error => {
    console.error('请求错误:', error);
  });
},

    showContent(contentId) {
      // 实现函数逻辑
      this.currentContent = contentId;
      console.log('显示内容：', contentId);
    },
    // 格式化日期
    formatDate(dateTimeStr) {
      const date = new Date(dateTimeStr);
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const hours = date.getHours();
      const minutes = date.getMinutes();
      return `${month}月${day}日 ${hours}:${minutes}`;
    },
    //精品课程页面跳转
    //输出获取到的id值到跳转页面
    goToCourse(id) {
      console.log('Clicked course id:', id);
      this.$router.push({
        name: 'CourseIntro',
        query: {
          course: id  // 将 id 作为参数传递
        }
      });
    },
    //课程简介页面跳转
    goTointros(introId) {
      // 可以使用路由导航将 introId 传递到目标页面
      this.$router.push({ name: 'CourseIntro', params: { id: introId } });
    },

    //课程简介
    // async fetchIntroData() {
    //   try {
    //     this.teams = [];

    //     // 假设这里有一个数组 semesterIds 存储了所有的 semester_id
    //     const  course_id = [1, 9, 33, 34, 36]; // 示例数据，可以根据实际情况修改

    //     // 遍历 semesterIds 数组，每个 semester_id 对应一个 API 请求
    //     for (let i = 0; i <  course_id.length; i++) {
    //       const response = await axios.get('http://192.168.137.1:8080/teacher/showteam', { semester_id:  course_id[i].toString() });

    //       // 检查响应是否有效
    //       if (!response.data || response.data.status !== 1) {
    //         console.error('接收到的数据结构无效:', response.data);
    //         continue; // 跳过当前请求，继续下一个请求
    //       }

    //       // 解构响应中的数据
    //       const { username, img_url} = response.data.data;

    //       // 创建 intro 对象，并设置自增的 id
    //       const introObject = {
    //         //id: i + 1, // 自增的 id，从 1 开始
    //         id: this.semester_id,
    //         img_url,
    //         username,

    //       };

    //       // 将 introObject 推入 intros 数组中
    //       this.intros.push(introObject);
    //     }

    //     // 控制台输出获取到的 intros 数组内容
    //     console.log('获取到的 intros 数组:');
    //     console.log(this.intros);

    //     // 示例：根据 id 进行 intros 数组的过滤
    //     this.filteredIntros = this.intros.filter;


    //     // 根据实际需求调整过滤逻辑

    //   } catch (error) {
    //     console.error('获取介绍数据时出错:', error);
    //     // 处理 API 请求的错误
    //   }
    // },


    // 评论获取
    fetchComments() {
      // const course_id = 5;  // 设置课程ID为5，你也可以根据需要动态设置这个值
      // const apiUrl = `http://192.168.137.1:8080/comment/excellent?course_id=${course_id}`;
      api.showGoodSemester(5)
        .then(response => {
          if (response.data.status === 1) {

            // 对评论数据进行处理
            this.comments = response.data.data.slice(0, 5).map(comment => {
              const formattedCreateTime = this.formatDateTime(comment.update_time); // 格式化时间字段
              // console.log('Formatted Create Time:', formattedCreateTime); // 添加输出
              return {
                formattedCreateTime,
                ...comment,

              };

            });
          } else {
            console.error('获取评论失败:', response.data.msg);
          }
        })
        .catch(error => {
          console.error('获取评论失败:', error);
        });
    },
    formatDateTime(update_time) {
      try {

        const date = new Date(update_time); // 将 ISO 8601 时间字符串转换为 Date 对象
        const year = date.getUTCFullYear(); // 获取 UTC 时间的年份
        const month = String(date.getUTCMonth() + 1).padStart(2, '0'); // 获取 UTC 时间的月份
        const day = String(date.getUTCDate()).padStart(2, '0'); // 获取 UTC 时间的日期
        const hours = String(date.getUTCHours()).padStart(2, '0'); // 获取 UTC 时间的小时
        const minutes = String(date.getUTCMinutes()).padStart(2, '0'); // 获取 UTC 时间的分钟
        const seconds = String(date.getUTCSeconds()).padStart(2, '0'); // 获取 UTC 时间的秒钟

        // 根据需要的格式自定义输出
        const formattedDateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        return formattedDateTime;

      } catch (error) {
        console.error('时间格式化失败:', error);
        return update_time; // 或者返回一个默认的值，或者原始的时间字符串
      }
    },


    // toggleUpvote(comment) {
    //     const apiUrl = `/api/comments/${comment.id}`;
    //     const requestData = {
    //       ...comment,
    //       isUpvoted: !comment.isUpvoted
    //     };

    //     axios.post(apiUrl, requestData)
    //       .then(response => {
    //         if (response.data.status === 'success') {
    //           comment.upvote = response.data.upvoteCount;
    //           comment.isUpvoted = !comment.isUpvoted; // 切换点赞状态
    //         } else {
    //           console.error('点赞失败:', response.data.msg);
    //         }
    //       })
    //       .catch(error => {
    //         console.error('点赞失败:', error);
    //       });
    //   }

  },
};
</script>

<style>
.main-content {
  display: flex;
  flex-direction: column;
  margin-left: 150px;
  margin-right: 150px;
}

.top-section {
  display: flex;
  margin-bottom: 2rem;
}

.sidebar {
  flex: 0.6;
  /* 占1/4宽度 */
  border-radius: 10px 0px 0px 10px;
}

.carousel-section {
  flex: 3.4;
  /* 占3/4宽度 */
  height: 400px;
  /* 确保侧边栏和轮播图等高 */
  opacity: 1;
  border-radius: 10px;
}

.carousel-placeholder {
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  height: 100%;

}

.course-section {
  height: 350px;
}

.intro-section {
  height: 500px;
}

.team-section {
  margin-bottom: 2rem;
  margin-top: 10px;
}

.course-list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.course-item {
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 添加动画效果 */
  width: calc(20% - 1rem);
  /* 每行5个课程 */
  height: 280px;
  border-radius: 10px;
}

.course-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.course-placeholder {
  height: 170px;
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */
  width: calc();
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  /* 防止图片超出div部分 */
}

.course-image {
  width: 100%;
  /* 图片宽度填充整个div */
  height: 100%;
  /* 高度自动调整，保持比例 */
  object-fit: cover;
  /* 保持图片比例，填充整个div */
}

.course-status.ongoing {
  background-color: rgba(59, 150, 255, 1);
  color: white;
  left: 246px;
  top: 855px;
  width: 108px;
  height: 25px;
  opacity: 1;
  border-radius: 0px 10px 10px 0px;
}

.course-title {

  width: 170px;
  height: 21px;
  opacity: 1;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0px;
  line-height: 20.27px;
  color: rgba(0, 0, 0, 1);
  text-align: justify;
  vertical-align: top;
  margin-top: 10px;
  margin-left: 10px;
}

.knowledge-title,
.comment-user,
.team-name {
  font-weight: bold;
}

.course-date {
  left: 257px;
  top: 921px;
  width: 100px;
  height: 15px;
  opacity: 1;
  margin-top: 5px;
  margin-left: 10px;
  /** 文本1 */
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(125, 125, 125, 1);
  text-align: justify;
  vertical-align: top;
}

.course-tea {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 17.38px;
  color: rgba(125, 125, 125, 1);
  text-align: justify;
  vertical-align: top;
  margin-top: 5px;
  margin-left: 10px;
  width: 40px;
}

.shijian {
  display: flex;

}

.course-semester_name {
  text-align: left;
  margin-left: 10px;
  margin-top: 15px;
}

.intro-content {
  margin-top: 20px;
}

.comment-content {
  text-align: left;
  /* 让文本内容左对齐 */
  margin-top: 5px;
}

.comment-date {
  color: #888;
  margin-left: 15px;
}

.intro-title {
  font-size: 16px;
  width: 150px;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);


}

.intro-text {
  font-size: 12px;
  font-weight: 400;
  color: rgba(125, 125, 125, 1);
  margin-top: 20px;
}

.intro-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  height: 500px;

}

.list1 {
  width: 70%;
}

.list2 {
  display: flex;
  width: 100%;

  height: 200px;

}

.list3 {
  margin-top: 15px;
  display: flex;
  width: 100%;
  height: 200px;
}

.intro-large {
  flex: 2 1 50%;
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

.intro-small {
  flex-direction: column;

}

.intro-smalll {
  flex-direction: column;

}

.intro-small-list {

  width: 30%;
  height: 415px;

}

.intro-smalll-list1 {
  margin-left: 15px;
  width: 50%;
  height: 200px;

}

.intro-item1 {
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 添加动画效果 */
  width: 50%;
  margin-left: 15px;
  height: 200px;
  display: flex;
}

.intro-item {
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 添加动画效果 */
  width: 30%;
}

.intro-placeholder {
  height: 270px;
  width: calc();
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */

}

.intro-placeholder1 {
  height: 200px;
  width: 170px;
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */

}

.intro-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.intro-item1:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}


.knowledge-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

.knowledge-item {
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */
  padding: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 添加动画效果 */
}

.knowledge-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.comment-item {
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
  /* 添加动画效果 */
  display: flex;
  align-items: center;
  height: 80px;
  justify-content: space-between;
  border-radius: 40px;
  /* 设置所有四个角的圆角半径为10像素 */
}

.shijian {
  display: flex;
}

.yonghu {
  width: 1100px;
  text-align: left;
  /* 让文本内容左对齐 */
  height: calc();
  margin-left: 10px;
}

.toux {
  margin-left: 15px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #ccc;
  overflow: hidden;
}

.toux img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 图片填充整个 div */
  border-radius: 50%;
  /* 确保图片也是圆形 */
}

.comment-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.comment-actions {
  display: flex;
  gap: 1rem;
  margin-top: 15px;
}

.zan {
  vertical-align: top;
  margin-top: 10px;
  margin-right: 20px;
  margin-left: 0px;
}


.comment-actions button {
  background: none;
  border: none;
  cursor: pointer;
  color: blue;
  width: 30px;
  /* 按钮宽度 */
  height: 30px;
  /* 按钮高度 */
  background-image: url('/src/assets/未点赞.png');
  /* 设置图片路径 */
  background-size: cover;
  /* 保证图片填充整个按钮 */
  background-repeat: no-repeat;
  /* 禁止图片重复 */
  text-indent: -9999px;
  /* 将按钮文本向左移出可见区域 */
  border: none;
  /* 去除按钮边框 */
  cursor: pointer;
  /* 鼠标指针样式设为手型 */

}

.team-list {
  display: flex;
  justify-content: space-between;
}

.team-item {

  height: 200px;
 
  flex: 1;
  margin: 0 0.5rem;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  transition: transform 0.3s, box-shadow 0.3s;
 
  /* 添加动画效果 */
}


.team-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.team-placeholder {
  height: 180px;
  background-color: rgba(0, 0, 0, 0.1);
  /* 黑色阴影块 */
  display: flex;
  justify-content: center;
  align-items: center;
 
  font-size: 1rem;
  color: #ff0000;
  overflow: hidden; /* 控制超出部分的隐藏 */
}
.team-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 图片填充容器，保持比例不变，可能会裁剪部分图片 */
}

.team-name {
  background-color: rgba(59, 150, 255, 1);
  /* 黑色阴影块 */
  letter-spacing: 0px;
  line-height: 35px;
  color: rgba(255, 255, 255, 1);
  padding-top: 5px;

}

h2 {
  height: 29px;
  opacity: 1;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 28.96px;
  color: rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(204, 204, 204, 1);
  text-align: left;
  padding-left: 10px;
}

.content-section a {
  text-decoration: none;
  width: 32px;
  height: 21px;
  opacity: 1;
  /** 文本1 */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 20.27px;
  color: rgba(59, 150, 255, 1);
}
</style>
